<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import BomNav from "../components/BomNav.vue";
import "../assets/font-three/iconfont.css";
import { useStore } from "../store/book";//菠萝
import { getCatalogueData } from "../api/liber.js";//书籍目录请求
export default {
  components: {
    BomNav,
  },
  setup() {
    let data = reactive({
      volumeId:null,
      pinialists:[],//菠萝数组
      tablist: [
        {
          id: 1,
          title: "书架",
        },
        {
          id: 2,
          title: "浏览历史",
        },
        {
          id: 3,
          title: "圈子",
        },
      ],
      night:window.localStorage.getItem("night"),
      durationTime: "0", //持续阅读时间
      change:false,//编辑
      change1:false,//编辑
      shelflist:JSON.parse(window.localStorage.getItem("shelf")),//书架
      dellist:[],//删除的下标
      comment:JSON.parse(window.localStorage.getItem("comment")),
      new:[
        {
          id:2,
          src:"https://bookcover.yuewen.com/qdbimg/349573/3681560/150",
          name:"斗罗大陆3 龙王传说",
          sth:"后记",
          show:false,
          last:1010,
          have:"完结",
          del:false,
        },
        {
          id:3,
          src:"https://bookcover.yuewen.com/qdbimg/349573/2517792/180",
          name:"斗罗大陆2 绝世唐门",
          sth:"后记",
          show:false,
          last:1996,
          have:"完结",
          del:false,
        },
        {
          id:4,
          src:"https://bookcover.yuewen.com/qdbimg/349573/1115277/180",
          name:"斗罗大陆",
          sth:"后记",
          show:false,
          last:866,
          have:"完结",
          del:false,
        }
      ],
      flag:false,

    });
    const active = ref(0);

    let router = useRouter();

    // 时间戳传化时间
    let times = Math.round(localStorage.getItem("duration") / 1000 / 60);
    data.durationTime = times > 1 ? times : "不足1";

    console.log(data.durationTime);
    console.log(data.change);

    let store = useStore(); //实例化book属性
    console.log("data",data.shelflist);//书架数组
    console.log(store.book);//菠萝数据


    // 将菠萝中的书加入数组
    let lists = store.book;
    data.pinialists = lists;
    lists.forEach((item)=>{
       data.shelflist.push(item)
    })



    let liberFun = (id) => {//跳转页面
      let params = {
        books: id,
        libers: "",
      };
      getCatalogueData(params)
        .then((item) => {
          data.volumeId = item.data.volumes[0].volumeId;//目录大章节id
          params.libers = item.data.volumes[0].chapters[0].chapterId; //章节id
        })
        .then(() => {//获取完成之后才跳转
          router.push({
            path: "/liber",
            query: {
              books: params.books,
              libers: params.libers,
              volumeId: data.volumeId,
            },
          });
        });
    };


    let booksFun = () => {
      return 0
      // router.push("/liber");
    };

    let gohome = ()=>{
      router.push("/home")
    }

    let say = () => {
      router.push("/say");
    };

    let gocom = (id) => {
      router.push({
        path:'/coment',
        query:{ itemId:id }
      })
    }
    let join = (index) =>{
      data.new[index].show=true
      data.shelflist.unshift(data.new[index])
    }
    let concern = () =>{
      data.flag=!data.flag
    }
    //删除
    let del = () =>{
      data.shelflist = data.shelflist.filter(item=>{
        return item.del==false
      })
      window.localStorage.setItem("shelf",JSON.stringify(data.shelflist))
    }
    return {
      data,
      concern,
      join,
      del,
      say,
      active,
      booksFun,
      gocom,
      liberFun,
      gohome
    };
  },
};
</script>

<template>
  <div :class="['shelf',data.night?'':'night']">
    <div class="container">
      <van-tabs v-model:active="active" animated>
        <van-tab
          v-for="(item, index) in data.tablist"
          :title="item.title"
          :key="index"
        >
          <div class="shelf1" v-show="index == 0">
            <div class="title">
              <div class="time">
                <i class="iconfont icon-tongqian"></i>
                <p>今天已读 {{ data.durationTime }}分钟</p>
              </div>
              <div class="change" @click="data.change=!data.change">
                <p>{{data.change?'取消':'编辑'}}</p>
              </div>
            </div>
            <div class="books" v-show="data.change==false">

              <!-- 书架 -->
              <div class="item" @click="booksFun" v-for="item in data.shelflist" :key="item.id" v-show="item.id">
                <div class="box">
                  <div class="img">
                    <img :src="item.src" alt="" />
                    <i>{{item.have}}</i>
                  </div>
                  <p>{{item.name}}</p>
                  <span>{{item.last}}章未读</span>
                </div>
              </div>

              <!-- 菠萝数据 -->
              <div class="item" @click="liberFun(item.books)" v-for="(item,indexs) in data.shelflist" :key="item.books" v-show="!item.id && item.bookrack">
                <div class="box">
                  <div class="img">
                    <img :src="item.coverImg" alt="" />
                    <i>{{item.bookEnd}}</i>
                  </div>
                  <p>{{item.bookName}}</p>
                  <span>9{{indexs}}2章未读</span>
                </div>
              </div>

              <div class="item add" @click="gohome">
                <div class="addbox">
                  <div class="ads">
                    <h3>+</h3>
                    <h4>去挑书</h4>
                  </div>
                </div>
              </div>

            </div>


            <div class="delbook" v-show="data.change">
              <div class="item" v-for="(item) in data.shelflist" :key="item.id">
                <div class="box">
                  <div class="img">
                    <img :src="item.src" alt="" />
                    <i>{{item.have}}</i>
                  </div>
                  <p>{{item.name}}</p>
                  <span>{{item.last}}章未读</span>
                  <input class="check" type="checkbox" v-model="item.del">
                </div>
              </div>
              
            </div>
          </div>


          <!-- 历史记录 -->
          <div class="shelf2" v-show="index == 1">
            <div class="history">
              <div class="readh">
                <div class="today">
                  <h2>今天</h2>
                  <div class="item">
                    <div class="img">
                      <img
                        src="https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg"
                        alt=""
                      />
                      <i>完结</i>
                    </div>
                    <div class="info">
                      <h3>斗罗大陆V 重生唐三</h3>
                      <div class="bottom">
                        <p>996章未读</p>
                        <div class="addin">已加入</div>
                      </div>
                    </div>
                  </div>

                  <!-- 菠萝数据遍历 -->
                  <div class="item" v-for="(item,indexs) in data.pinialists" :key="item.books">
                    <div class="img">
                      <img
                        :src="item.coverImg"
                        :alt="item.bookName"
                      />
                      <i>完结</i>
                    </div>
                    <div class="info">
                      <h3>{{item.bookName}}</h3>
                      <div class="bottom">
                        <p>9{{indexs}}2章未读</p>
                        <div class="addin">加入书架</div>
                      </div>
                    </div>
                  </div>
                  

                </div>


                <div class="today">
                  <h2>更多</h2>
                  <div class="item" v-for="(item,index) in data.new" :key="item.id">
                    <div class="img">
                      <img
                        :src="item.src"
                        alt=""
                      />
                      <i>完结</i>
                    </div>
                    <div class="info">
                      <h3>{{item.name}}</h3>
                      <div class="bottom">
                        <p>{{item.sth}}</p>
                        <div class="addin" @click="join(index)">{{item.show?'已加入':'加入书架'}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="shelf3" v-show="index == 2">
            <div class="title">
              <h4>最近逛过</h4>
            </div>
            <div class="list">
              <div class="item">
                <img
                  src="https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg"
                  alt=""
                />
                <p>斗罗大陆</p>
              </div>
            </div>
            <div class="title">
              <h4>热门讨论</h4>
            </div>
            <div class="comment">
              <div class="item" v-for="item in data.comment" :key="item.id">
                <div class="author">
                  <div class="left">
                    <img
                      :src="item.src"
                      alt=""
                    />
                    <div class="info">
                      <h4>笔记圈</h4>
                      <p>
                        <span>来自</span>
                        <span>{{item.name}}</span>
                      </p>
                    </div>
                  </div>
                  <div v-show="item.id!=2" @click="concern" class="btn">{{data.flag?"已关注":"+ 关注"}}</div>
                </div>
                <div class="content">
                  <p class="text" @click="gocom(item.id)">{{item.text}}</p>
                  <div class="img" v-show="item.img">
                    <img v-for="item1 in item.img" :key="item1.id" :src="item1.src" alt="">
                  </div>
                </div>
                <div class="bottom">
                  <div class="item1">
                    <i class="iconfont icon-zhuanfa"></i>
                    <span>转发</span>
                  </div>
                  <div class="item1">
                    <i class="iconfont icon-qipao"></i>
                    <span>{{item.comment.length}}</span>
                  </div>
                  <div class="item1">
                    <i class="iconfont icon-aixin"></i>
                    <span>{{item.like}}</span>
                  </div>

                </div>
              </div>
            </div>
            <div class="fb" @click="say">
              <img src="../assets/imgs/pen.png" alt="">
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
              <div class="delbox" v-show="data.change" @click="del">
                <i class="iconfont icon-lajitong"></i>
                <p>删除</p>
              </div>
  <div class="ts" v-show="!data.change"></div>
  <BomNav v-show="!data.change" />
</template>

<style lang="scss" scoped>
.ts{
  height: 41.6px;
  width: 100%;
}
.delbox{
        position: absolute;
        bottom: 12px;
        right: 12px;
        i{
          font-size: 24px;
          color: rgb(248, 80, 80);
        }
        p{
          font-size: 14px;
          text-align: center;
          line-height: 14px;
          height: 16px;
          color: rgb(248, 80, 80);
        }
      }
.shelf {
  padding: 0 16px;
  ::v-deep .van-tab span {
    color: #8e898e;
    font-weight: 800;
    font-size: 16px;
    display: block;
    height: 26px;
  }
  ::v-deep .van-tab {
    flex: none;
    align-items: flex-end;
    justify-content: flex-start;
  }
  ::v-deep .van-tabs__line {
    display: none;
  }
  ::v-deep .van-tab.van-tab--active span {
    font-size: 24px;
    font-weight: 800;
    color: black;
  }
  .shelf1 {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      .time{
        display: flex;
        padding: 0 5px;
        background-color: #f6f6f6;
        width: 130px;
        height: 32px;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        .icon-tongqian {
        font-size: 16px;
        color: #ffbc52;
        margin-right: 4px;
      }
      p {
        font-size: 12px;
        color: #000;
        font-weight: 800;
      }
      }
    }
    .change {
      p {
        font-size: 16px;
        color: #000;
        font-weight: 800;
      }
    }
    .books {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33%;
      height: 100%;
      margin-top: 24px;
      margin-left: 1px;
      .box {
        width: 96px;
        height: 100%;
        .img {
          position: relative;
          img {
            display: block;
            width: 96px;
            height: 130px;
            border-radius: 6px;
          }
          i {
            display: block;
            position: absolute;
            height: 18px;
            width: 30px;
            background-color: #5f605f;
            color: #fff;
            font-style: normal;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            top: 4px;
            right: 4px;
          }
        }
        p {
          margin-top: 6px;
          font-size: 15px;
          color: #181818;
          font-weight: 800;
          line-height: 24px;
          height: 48px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          font-size: 12px;
          color: #afafaf;
        }
      }
    }
    .item.add {
      .addbox {
        width: 96px;
        height: 130px;
        background-color: #f6f6f6;
        border-radius: 6px;
        padding-top: 24px;
        box-sizing: border-box;
        .ads {
          h3 {
            width: 100%;
            color: #dddddd;
            text-align: center;
            font-size: 40px;
            height: 40px;
          }
          h4 {
            width: 100%;
            color: #bebebe;
            text-align: center;
            height: 12px;
            font-size: 12px;
          }
        }
      }
    }
  }
    .delbook{
      display: flex;
      flex-wrap: wrap;
      
      .item{
      margin-top: 24px;
      width: 33%;
      margin-left: 1px;
      .box {
        position: relative;
        width: 96px;
        height: 100%;
        .img {
          position: relative;
          img {
            display: block;
            width: 96px;
            height: 130px;
            border-radius: 6px;
          }
          i {
            display: block;
            position: absolute;
            height: 18px;
            width: 30px;
            background-color: #5f605f;
            color: #fff;
            font-style: normal;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            top: 4px;
            right: 4px;
          }
        }
        p {
          margin-top: 6px;
          font-size: 15px;
          color: #181818;
          font-weight: 800;
          line-height: 24px;
          height: 48px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          font-size: 12px;
          color: #afafaf;
        }
        .check{
          position: absolute;
          bottom: 76px;
          right: 4px;
          
        }
      }
      }
      
    }
  }
  
  .shelf2 {
    .title {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rl {
        display: flex;
        span {
          display: block;
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background-color: #f7f7f7;
          color: #9f9f9f;
          font-size: 12px;
          border-radius: 6px;
          margin-right: 6px;
        }
        span.con {
          background-color: #feede5;
          color: #e57749;
        }
      }
      .change {
        p {
          font-size: 16px;
          color: #000;
          font-weight: 800;
        }
      }
    }
    .history {
      .readh {
        .today {
          h2 {
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            font-weight: 800;
          }
          .item {
            height: 84px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            .img {
              position: relative;
              width: 18%;
              img {
                width: 60px;
                height: 84px;
                border-radius: 4px;
                display: block;
              }
              i {
                display: block;
                position: absolute;
                height: 18px;
                width: 28px;
                background-color: #5f605f;
                color: #fff;
                font-style: normal;
                text-align: center;
                border-radius: 4px;
                font-size: 12px;
                top: 4px;
                right: 4px;
              }
            }
            .info {
              width: 80%;
              h3 {
                height: 45px;
                line-height: 45px;
                font-size: 15px;
                font-weight: 800;
              }
              .bottom {
                height: 36px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                  font-size: 12px;
                  color: #b1b1b1;
                }
                .addin {
                  width: 74px;
                  height: 26px;
                  background-color: #f7f7f7;
                  border-radius: 14px;
                  color: #e57749;
                  font-size: 12px;
                  font-weight: 800;
                  text-align: center;
                  line-height: 26px;
                }
              }
            }
          }
        }
      }
    }
  }
  .shelf3 {
    position: relative;
    .title {
      h4 {
        height: 56px;
        line-height: 56px;
        font-size: 16px;
        font-weight: 800;
      }
    }
    .list {
      display: flex;
      .item {
        width: 100px;
        height: 154px;
        background-color: #f6eceb;
        border-radius: 4px;
        padding: 10px 0;
        box-sizing: border-box;
        margin-right: 10px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: block;
          margin: 0 auto;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          color: #181818;
          line-height: 18px;
          font-weight: 800;
          height: 36px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-align: center;
        }
        .btn {
          width: 60px;
          height: 30px;
          background-color: #fff;
          color: #e57749;
          line-height: 30px;
          margin: 0 auto;
          text-align: center;
          font-size: 12px;
          border-radius: 20px;
        }
      }
    }
    .comment {
      .item {
        height: 100%;
        border-bottom: 2px solid #f8f8f8;
        margin-top: 20px;
        .author {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;
            img {
              display: block;
              width: 36px;
              height: 36px;
              border-radius: 50%;
            }
            .info {
              margin-left: 10px;
              h4 {
                font-size: 14px;
                height: 14px;
                font-weight: 800;
              }
              p {
                margin-top: 5px;
                span {
                  margin-right: 5px;
                  font-size: 12px;
                  color: #c0c0c0;
                }
              }
            }
          }
          .btn {
            width: 56px;
            height: 26px;
            border-radius: 12px;
            background-color: #f6f8f5;
            text-align: center;
            line-height: 26px;
            color: #e57749;
            font-size: 12px;
          }
        }
        .content {
          .text {
            font-size: 16px;
            line-height: 36px;
          }
          .img {
            display: flex;
            flex-wrap: wrap;
            img {
              display: block;
              margin-right: 8px;
              margin-bottom: 8px;
              width: 106px;
              height: 106px;
              border-radius: 6px;
            }
          }
        }
        .bottom{
      display: flex;
      align-items: center;
    justify-content: space-around;
    margin: 12px 0;
      .item1{
        color: #aeaeae;
        i{
          font-size: 20px;
          
        }
        span{
          font-size: 12px;
          margin-left: 6px;
        }
      }
    }
      }
    }
    .fb{
      position: absolute;
      right: 10px;
      top: 216px;
      background-color: #f96825;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-sizing: border-box;
      padding: 8px;
      img{
        width: 24px;
        height: 24px;
        

      }
    }
  }
}
.shelf.night{
  background-color: #000;
  height: 100vh;
  ::v-deep .van-tab.van-tab--active span {
    font-size: 24px;
    font-weight: 800;
    color: white;
  }
  ::v-deep .van-tabs__nav{
    background-color: #000;
  }
  .shelf1 {
    .title {
      .time{
        display: flex;
        padding: 0 5px;
        background-color: #f6f6f6;
        width: 130px;
        height: 32px;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        .icon-tongqian {
        font-size: 16px;
        color: #ffbc52;
        margin-right: 4px;
      }
      p {
        font-size: 12px;
        color: #000;
        font-weight: 800;
      }
      }
    }
    .change {
      p {
        font-size: 16px;
        color: #fff;
        font-weight: 800;
      }
    }
    .books {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33%;
      height: 100%;
      margin-top: 24px;
      margin-left: 1px;
      .box {
        width: 96px;
        height: 100%;
        .img {
          position: relative;
          img {
            display: block;
            width: 96px;
            height: 130px;
            border-radius: 6px;
          }
          i {
            display: block;
            position: absolute;
            height: 18px;
            width: 30px;
            background-color: #5f605f;
            color: #fff;
            font-style: normal;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            top: 4px;
            right: 4px;
          }
        }
        p {
          margin-top: 6px;
          font-size: 15px;
          color: #fff;
          font-weight: 800;
          line-height: 24px;
          height: 48px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          font-size: 12px;
          color: #afafaf;
        }
      }
    }
    .item.add {
      .addbox {
        width: 96px;
        height: 130px;
        background-color: #f6f6f6;
        border-radius: 6px;
        padding-top: 24px;
        box-sizing: border-box;
        .ads {
          h3 {
            width: 100%;
            color: #dddddd;
            text-align: center;
            font-size: 40px;
            height: 40px;
          }
          h4 {
            width: 100%;
            color: #bebebe;
            text-align: center;
            height: 12px;
            font-size: 12px;
          }
        }
      }
    }
  }
    .delbook{
      .item{
      .box {
        .img {
          i {
            display: block;
            position: absolute;
            height: 18px;
            width: 30px;
            background-color: #5f605f;
            color: #fff;
            font-style: normal;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            top: 4px;
            right: 4px;
          }
        }
        p{
          margin-top: 6px;
          font-size: 15px;
          color: #fff;
          font-weight: 800;
          line-height: 24px;
          height: 48px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      }
      
    }
  }
  
  .shelf2 {
    .title {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rl {
        display: flex;
        span {
          display: block;
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background-color: #f7f7f7;
          color: #9f9f9f;
          font-size: 12px;
          border-radius: 6px;
          margin-right: 6px;
        }
        span.con {
          background-color: #feede5;
          color: #e57749;
        }
      }
      .change {
        p {
          font-size: 16px;
          color: #fff;
          font-weight: 800;
        }
      }
    }
    .history {
      .readh {
        .today {
          h2 {
            height: 56px;
            line-height: 56px;
            font-size: 18px;
            font-weight: 800;
          }
          .item {
            height: 84px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            .img {
              position: relative;
              width: 18%;
              img {
                width: 60px;
                height: 84px;
                border-radius: 4px;
                display: block;
              }
              i {
                display: block;
                position: absolute;
                height: 18px;
                width: 28px;
                background-color: #5f605f;
                color: #fff;
                font-style: normal;
                text-align: center;
                border-radius: 4px;
                font-size: 12px;
                top: 4px;
                right: 4px;
              }
            }
            .info {
              width: 80%;
              h3 {
                height: 45px;
                line-height: 45px;
                font-size: 15px;
                font-weight: 800;
                color: white;
              }
              .bottom {
                height: 36px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                  font-size: 12px;
                  color: #b1b1b1;
                }
                .addin {
                  width: 74px;
                  height: 26px;
                  background-color: #f7f7f7;
                  border-radius: 14px;
                  color: #e57749;
                  font-size: 12px;
                  font-weight: 800;
                  text-align: center;
                  line-height: 26px;
                }
              }
            }
          }
        }
      }
    }
  }
  .shelf3 {
    .title {
      h4 {
        height: 56px;
        line-height: 56px;
        font-size: 16px;
        font-weight: 800;
        color: white;
      }
    }
    .list {
      display: flex;
      .item {
        width: 100px;
        height: 154px;
        background-color: #f6eceb;
        border-radius: 4px;
        padding: 10px 0;
        box-sizing: border-box;
        margin-right: 10px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: block;
          margin: 0 auto;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          color: #181818;
          line-height: 18px;
          font-weight: 800;
          height: 36px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-align: center;
        }
        .btn {
          width: 60px;
          height: 30px;
          background-color: #fff;
          color: #e57749;
          line-height: 30px;
          margin: 0 auto;
          text-align: center;
          font-size: 12px;
          border-radius: 20px;
        }
      }
    }
    .comment {
      .item {
        height: 100%;
        border-bottom: 2px solid #f8f8f8;
        margin-top: 20px;
        background-color: #000;
        .author {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;
            img {
              display: block;
              width: 36px;
              height: 36px;
              border-radius: 50%;
            }
            .info {
              margin-left: 10px;
              h4 {
                font-size: 14px;
                height: 14px;
                font-weight: 800;
                color: white;
              }
              p {
                margin-top: 5px;
                color: white;
                span {
                  margin-right: 5px;
                  font-size: 12px;
                  color: #c0c0c0;
                }
              }
            }
          }
          .btn {
            width: 56px;
            height: 26px;
            border-radius: 12px;
            background-color: #f6f8f5;
            text-align: center;
            line-height: 26px;
            color: #e57749;
            font-size: 12px;
          }
        }
        .content {
          .text {
            font-size: 16px;
            line-height: 36px;
            color: white;
          }
          .img {
            display: flex;
            flex-wrap: wrap;
            img {
              display: block;
              margin-right: 8px;
              margin-bottom: 8px;
              width: 106px;
              height: 106px;
              border-radius: 6px;
            }
          }
        }
        .bottom{
      display: flex;
      align-items: center;
    justify-content: space-around;
    margin: 12px 0;
      .item1{
        color: #aeaeae;
        i{
          font-size: 20px;
          
        }
        span{
          font-size: 12px;
          margin-left: 6px;
        }
      }
    }
      }
    }
    
  }
}
</style>